<template>
	<div class="card-box sex-box">
		<card-title title="各类上岗成员性别统计"></card-title>
		<div class="ratio-box">
			<div class="man-item" v-for="(item, i) in sexList" :key="i">
				<div class="icon-ratio">
					<div class="icon">
						<img :src="item.icon" class="image" alt="" />
					</div>
					<div class="ratio">
						<div class="num">{{ item.val3 }}</div>
						<div class="des">{{ item.val1 }}</div>
					</div>
				</div>
				<div class="humans">{{ item.val2 }}</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
	list: {
		type: Array,
		default: [],
	},
});
const sexList = computed(() => {
	props.list.forEach((it) => {
		if (it.val1 == "男性占比") {
			it.icon = new URL("../../../../../assets/images/home/man.png", import.meta.url).href;
		} else {
			it.icon = new URL("../../../../../assets/images/home/woman.png", import.meta.url).href;
		}
	});
    return props.list
});

</script>

<style scoped lang="scss">
@import "../../../../../assets/css/common.scss";
.sex-box {
	height: 246px;
	.ratio-box {
		padding: 40px 0;
		display: flex;
		align-items: center;
		margin-left: -20px;

		.man-item {
			flex:1;
			font-size: 18px;
			margin-left: 20px;
			.icon-ratio {
				display: flex;
				align-items: center;
				height: 97px;
				width: 97px;
				.icon {
					width: 100%;
					height: 100%;
				}
				.ratio {
					margin-left: 5px;
					height: 100%;
					padding: 10px 0;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.num {
						font-size: 30px;
					}
				}
			}
			.humans {
				margin-top: 10px;
				width: 98px;
				text-align: center;
			}
		}
	}
}
</style>
